<template>
  <NavBar />
  <van-collapse v-model="activeName" accordion>
    <van-collapse-item title="学科" name="1" :value="subjectName" icon="shop-o">
      <van-grid :column-num="4" clickable>
        <van-grid-item v-for="item in dictData" :key="item.dictValue" :text="item.dictLabel" @click="changeSubjectHandle(item)" />
      </van-grid>
    </van-collapse-item>
  </van-collapse>

  <!-- 科目 -->
  <subject-tree v-show="chapterTreeLength > 0" :treeData="chapterTree" />

  <van-empty v-show="chapterTreeLength ===0" description="暂无数据" />

</template>

<script>
import NavBar from "@/components/layout/nav-bar";
import SideBar from "@/components/layout/side-bar";
import SubjectTree from "@/components/subject/subject-tree";
import { defineComponent,reactive,ref,toRefs } from "vue";
import { Toast } from "vant";
import { useStore } from "vuex";
import http from "@/utils/http";
export default defineComponent({
  name: "chapter",
  components: { NavBar,SideBar,SubjectTree },
  setup(){
    const store = useStore();
    const activeName = ref('1');
    const state = reactive({
      dictData: store.state.dictData,
      subjectName: "请选择",
      chapterTreeLength: 0,
      chapterTree: []
    })

    const changeSubjectHandle = ((item)=>{
      activeName.value = ''
      state.subjectName = item.dictLabel;
      http.get('/education/subject/tree/'+item.dictId).then(({data: res})=>{
        if (res.code !==0){
          return Toast.fail(res.msg)
        }
        state.chapterTree = res.data;
        state.chapterTreeLength = res.data.length;
      })
    })

    return {
      activeName,
      changeSubjectHandle,
      ...toRefs(state)
    }
  }

})
</script>

<style scoped>
.category {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
</style>
